import React, { useState, useEffect } from 'react'

import { useSelector, useDispatch } from 'react-redux';
import {
  changeCurrentCateId,
} from '@/stores/cartSlice';
import { selectTabs, selectTags, selectGoods, selectCurrentCateId } from "../stores/cartSlice";

import styles from './css/cate/index.module.scss'
import GoodsItem from '../components/GoodsItem';

export default function CateView() {
  const dispatch = useDispatch();

  const [isAll, setIsAll] = useState(false)

  const tabs = useSelector(selectTabs)
  const tags = useSelector(selectTags)
  const goods = useSelector(selectGoods)
  const currentCateId = useSelector(selectCurrentCateId)

  function clickTab(id) {
    setIsAll(false)
    dispatch(changeCurrentCateId({ sort: id }))
  }

  const [goodsShow, setGoodsShow] = useState([])
  // function goodsShow() {
  //   if (goods) {
  //     return goods[currentCateId].goods
  //   }
  //   return []
  // }
  useEffect(() => {
    if (goods) { setGoodsShow(goods[currentCateId].goods) }
  }, [currentCateId])
  return (
    <div className="container" style={{ paddingBottom: '40px' }}>
      <div className={styles["cate_list"]}>
        <div className={styles["list"]}>
          <span style={{ color: '#9B9B9B' }}>{tabs?.name}：</span>
          <ul>
            <li className={isAll ? styles['active'] : ''} onClick={() => setIsAll(true)}>全部分类</li>
            {tabs?.content.map(tab => (
              <li key={tab.sort} className={tab.sort == currentCateId && !isAll ? styles['active'] : ''} onClick={() => clickTab(tab.sort)}>
                {tab?.name}
              </li>
            ))}

          </ul>
        </div>

        <div className={styles["list"]}>
          <span style={{ color: '#9B9B9B' }}>{tags?.name}：</span>
          <ul className={styles["second_cate"]}>
            <li className={styles["active"]}>全部口味</li>
            {tags?.content.map(tag => (
              <li key={tag.id}>{tag?.name}</li>
            ))}

          </ul>
        </div>
      </div>

      {/* <!-- 装列表的盒子-- > */}
      <div className={styles["pro-list-box"]}>
        {isAll ? (
          <section>
            {Object.values(goods).map((item, index) => (
              <div key={index}>
                <div className={styles["t_box"] + ' ' + ((index == 1) ? styles['first'] : '')}>
                  <div className={styles["title_box"]}>
                    <div className={styles["title"]}>{item?.title}</div>
                    <span className={styles["desc"]}>{item?.description}</span>
                  </div>
                </div>
                <ul className={styles["pro-list-pro"]}>
                  {item?.goods.map((goodsItem, i) => (
                    <GoodsItem key={i} item={goodsItem} />
                  ))}
                </ul>
              </div >
            ))}
          </section >
        ) : (
          <ul className={styles["pro-list-pro"]}>
            {goodsShow.map((goodsItem, i) => (
              <GoodsItem key={i} item={goodsItem} />
            ))}
          </ul>
        )}
      </div >
    </div >
  )
}
